<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌管理</title>
    <link rel="stylesheet" href="../css/elementui.css">
    <style type="text/css">
        .el-table .warning-row {
            background: oldlace;
        }
        .el-table .success-row {
            background: #f0f9eb;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="名称">
            <el-input placeholder="请输入品牌名称.." v-model="searchMap.name"></el-input>
        </el-form-item>
        <el-form-item label="首字母">
            <el-input placeholder="请输入品牌首字母.." v-model="searchMap.letter"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="searchByCondition">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="pojo={},imageUrl='',formVisible=true">新增</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" height="550" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column fixed prop="id" label="ID" width="180"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="letter" label="首字母" width="180"></el-table-column>
        <el-table-column label="图片" width="180">
            <template slot-scope="scope">
                <img :src="scope.row.image" width="100" height="50">
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template slot-scope="scope">
                <el-button type="text" size="big" @click="edit(scope.row.id)">修改</el-button>
                <el-button type="text" size="big" @click="del(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="changeSize"
            @current-change="changePage"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <el-dialog title="品牌编辑" :visible.sync="formVisible">
        <el-form label-width="82px">
            <el-form-item label="品牌名称">
                <el-input  placeholder="请填写品牌名称.." v-model="pojo.name"></el-input>
            </el-form-item>
            <el-form-item label="品牌首字母">
                <el-input  placeholder="请填写品牌首字母.." v-model="pojo.letter"></el-input>
            </el-form-item>
            <el-form-item label="品牌图片" width="">
                <!--<el-input  placeholder="请填写品牌图片.." v-model="pojo.image"></el-input>-->
                <el-upload
                        ref="upload"
                        class="avatar-uploader"
                        action="/upload/oss.do?folder=brand"
                        :show-file-list="false"
                        :file-list="imageList"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="品牌排序">
                <el-input  placeholder="请填写品牌排序.." v-model="pojo.seq"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="save()">保存</el-button>
                <el-button @click="formVisible=false">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/elementui.js"></script>
<script src="../js/axios.js"></script>
<script>
    new Vue({
       el:"#app",
       data(){
           return {
               tableData:[],
               currentPage:1,
               size:10,
               total:0,
               searchMap:{},
               formVisible:false,
               pojo:{},
               imageUrl:''
           }
       },
       created(){
           this.changePage();
           console.log("created");
       },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 !==0) {
                    return 'warning-row';
                } else if (rowIndex % 2 === 0) {
                    return 'success-row';
                }
                return '';
            },
            changePage(){
                axios.post(`/brand/findConditionAndPage.do?page=${this.currentPage}&size=${this.size}`,this.searchMap).then(response=>{
                    this.tableData=response.data.rows;
                    this.total=response.data.total;
                })
            },
            changeSize(selectPageSize){
                axios.post(`/brand/findConditionAndPage.do?page=${this.currentPage}&size=${selectPageSize}`,this.searchMap).then(response=>{
                    this.tableData=response.data.rows;
                    this.total=response.data.total;
                    this.size=selectPageSize;
                })
            },
            searchByCondition(){
                axios.post(`/brand/findConditionAndPage.do?page=${this.currentPage}&size=${this.size}`,this.searchMap).then(response=>{
                    this.tableData=response.data.rows;
                    this.total=response.data.total;
                })
            },
            save(){
                this.pojo.image=this.imageUrl;
                axios.post(`/brand/${this.pojo.id==null ? 'add' : 'update'}.do`,this.pojo).then(response=>{
                    this.formVisible=false;
                    this.searchByCondition();
                    //this.$refs.upload.clearFiles();
                });
            },
            edit(id){
                this.formVisible=true;
                axios.get(`/brand/findById.do?id=${id}`).then(response=>{
                    this.pojo=response.data;
                    this.imageUrl=this.pojo.image;
                });
            },
            del(id){
                this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //删除
                    axios.get(`/brand/delete.do?id=${id}`).then( response=>{
                        this.searchByCondition();
                        this.$alert('删除成功', '提示');
                    })
                });
            },
            handleAvatarSuccess(res, file) {
                //this.imageUrl = URL.createObjectURL(file.raw);
                this.imageUrl=file.response;
                //this.$forceUpdate(); //触发强制刷新，回显图片
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    });
</script>
</html>